﻿
import * as echarts from 'echarts'

export function fn() {
  console.log('开始画图')
  echarts_1()
  echarts_2()
  echarts_4()
  echarts_31()
  echarts_32()
  echarts_33()
  echarts_5()
  echarts_6()
  echarts_7()
  function echarts_1() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart1'))

    const option = {
      title: {
        text: 'World Population'
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      legend: {},
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        containLabel: true
      },
      xAxis: {
        type: 'value',
        boundaryGap: [0, 0.01]
      },
      yAxis: {
        type: 'category',
        data: ['Brazil', 'Indonesia', 'USA', 'India', 'China', 'World']
      },
      series: [
        {
          name: '2011',
          type: 'bar',
          data: [18203, 23489, 29034, 104970, 131744, 630230]
        },
        {
          name: '2012',
          type: 'bar',
          data: [19325, 23438, 31000, 121594, 134141, 681807]
        }
      ]
      /* tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },
      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['商超门店', '教育培训', '房地产', '生活服务', '汽车销售', '旅游酒店', '五金建材'],
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1)',
            width: 1,
            type: 'solid'
          }
        },

        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          // formatter: '{value} %'
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1	)',
            width: 1,
            type: 'solid'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [
        {
          type: 'bar',
          data: [200, 300, 300, 900, 1500, 1200, 600],
          barWidth: '35%', // 柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: '#2f89cf',
              opacity: 1,
              barBorderRadius: 5
            }
          }
        }

      ] */
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_2() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart2'))

    const option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: { type: 'shadow' }
      },
      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '4%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽'],
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1)',
            width: 1,
            type: 'solid'
          }
        },

        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          // formatter: '{value} %'
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1	)',
            width: 1,
            type: 'solid'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [
        {

          type: 'bar',
          data: [1500, 1200, 600, 200, 300, 300, 900],
          barWidth: '35%', // 柱子宽度
          // barGap: 1, //柱子之间间距
          itemStyle: {
            normal: {
              color: '#27d08a',
              opacity: 1,
              barBorderRadius: 5
            }
          }
        }

      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_5() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart5'))

    const option = {
      //  backgroundColor: '#00265f',
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'shadow'
        }
      },

      grid: {
        left: '0%',
        top: '10px',
        right: '0%',
        bottom: '2%',
        containLabel: true
      },
      xAxis: [{
        type: 'category',
        data: ['浙江', '上海', '江苏', '广东', '北京', '深圳', '安徽', '四川'],
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1)',
            width: 1,
            type: 'solid'
          }
        },

        axisTick: {
          show: false
        },
        axisLabel: {
          interval: 0,
          // rotate:50,
          show: true,
          splitNumber: 15,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        }
      }],
      yAxis: [{
        type: 'value',
        axisLabel: {
          // formatter: '{value} %'
          show: true,
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: '12'
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: 'rgba(255,255,255,.1	)',
            width: 1,
            type: 'solid'
          }
        },
        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [{
        type: 'bar',
        data: [2, 3, 3, 9, 15, 12, 6, 4, 6, 7, 4, 10],
        barWidth: '35%', // 柱子宽度
        // barGap: 1, //柱子之间间距
        itemStyle: {
          normal: {
            color: '#2f89cf',
            opacity: 1,
            barBorderRadius: 5
          }
        }
      }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

  function echarts_4() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart4'))

    const option = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          lineStyle: {
            color: '#dddc6b'
          }
        }
      },
      legend: {
        top: '0%',
        data: ['安卓', 'IOS'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12'
        }
      },
      grid: {
        left: '10',
        top: '30',
        right: '10',
        bottom: '10',
        containLabel: true
      },

      xAxis: [{
        type: 'category',
        boundaryGap: false,
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 12
          }
        },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.2)'
          }

        },

        data: ['01', '02', '03', '04', '05', '06', '07', '08', '09', '11', '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23', '24']

      }, {

        axisPointer: { show: false },
        axisLine: { show: false },
        position: 'bottom',
        offset: 20

      }],

      yAxis: [{
        type: 'value',
        axisTick: { show: false },
        axisLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        },
        axisLabel: {
          textStyle: {
            color: 'rgba(255,255,255,.6)',
            fontSize: 12
          }
        },

        splitLine: {
          lineStyle: {
            color: 'rgba(255,255,255,.1)'
          }
        }
      }],
      series: [
        {
          name: '安卓',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#0184d5',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(1, 132, 213, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(1, 132, 213, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          },
          itemStyle: {
            normal: {
              color: '#0184d5',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: [3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4, 3, 4, 3, 4, 3, 4, 3, 6, 2, 4, 2, 4]

        },
        {
          name: 'IOS',
          type: 'line',
          smooth: true,
          symbol: 'circle',
          symbolSize: 5,
          showSymbol: false,
          lineStyle: {

            normal: {
              color: '#00d887',
              width: 2
            }
          },
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: 'rgba(0, 216, 135, 0.4)'
              }, {
                offset: 0.8,
                color: 'rgba(0, 216, 135, 0.1)'
              }], false),
              shadowColor: 'rgba(0, 0, 0, 0.1)'
            }
          },
          itemStyle: {
            normal: {
              color: '#00d887',
              borderColor: 'rgba(221, 220, 107, .1)',
              borderWidth: 12
            }
          },
          data: [5, 3, 5, 6, 1, 5, 3, 5, 6, 4, 6, 4, 8, 3, 5, 6, 1, 5, 3, 7, 2, 5, 1, 4]

        }

      ]

    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_6() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart6'))

    var dataStyle = {
      normal: {
        label: {
          show: false
        },
        labelLine: {
          show: false
        }
        // shadowBlur: 40,
        // shadowColor: 'rgba(40, 40, 40, 1)',
      }
    }
    var placeHolderStyle = {
      normal: {
        color: 'rgba(255,255,255,.05)',
        label: { show: false },
        labelLine: { show: false }
      },
      emphasis: {
        color: 'rgba(0,0,0,0)'
      }
    }
    const option = {
      color: ['#0f63d6', '#0f78d6', '#0f8cd6', '#0fa0d6', '#0fb4d6'],
      tooltip: {
        show: true,
        formatter: '{a} : {c} '
      },
      legend: {
        itemWidth: 10,
        itemHeight: 10,
        itemGap: 12,
        bottom: '3%',

        data: ['浙江', '上海', '广东', '北京', '深圳'],
        textStyle: {
          color: 'rgba(255,255,255,.6)'
        }
      },

      series: [
        {
          name: '浙江',
          type: 'pie',
          clockWise: false,
          center: ['50%', '42%'],
          radius: ['59%', '70%'],
          itemStyle: dataStyle,
          hoverAnimation: false,
          data: [{
            value: 80,
            name: '01'
          }, {
            value: 20,
            name: 'invisible',
            tooltip: { show: false },
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '上海',
          type: 'pie',
          clockWise: false,
          center: ['50%', '42%'],
          radius: ['49%', '60%'],
          itemStyle: dataStyle,
          hoverAnimation: false,
          data: [{
            value: 70,
            name: '02'
          }, {
            value: 30,
            name: 'invisible',
            tooltip: { show: false },
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '广东',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          center: ['50%', '42%'],
          radius: ['39%', '50%'],
          itemStyle: dataStyle,
          data: [{
            value: 65,
            name: '03'
          }, {
            value: 35,
            name: 'invisible',
            tooltip: { show: false },
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '北京',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          center: ['50%', '42%'],
          radius: ['29%', '40%'],
          itemStyle: dataStyle,
          data: [{
            value: 60,
            name: '04'
          }, {
            value: 40,
            name: 'invisible',
            tooltip: { show: false },
            itemStyle: placeHolderStyle
          }]
        },
        {
          name: '深圳',
          type: 'pie',
          clockWise: false,
          hoverAnimation: false,
          center: ['50%', '42%'],
          radius: ['20%', '30%'],
          itemStyle: dataStyle,
          data: [{
            value: 50,
            name: '05'
          }, {
            value: 50,
            name: 'invisible',
            tooltip: { show: false },
            itemStyle: placeHolderStyle
          }]
        }]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_31() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb1'))
    const option = {

      title: [{
        text: '年龄分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        position: function (p) { // 其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10]
        }
      },
      legend: {

        top: '70%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['0岁以下', '20-29岁', '30-39岁', '40-49岁', '50岁以上'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12'
        }
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 1, name: '0岁以下' },
            { value: 4, name: '20-29岁' },
            { value: 2, name: '30-39岁' },
            { value: 2, name: '40-49岁' },
            { value: 1, name: '50岁以上' }
          ]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_32() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb2'))
    const option = {

      title: [{
        text: '职业分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        position: function (p) { // 其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10]
        }
      },
      legend: {

        top: '70%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['电子商务', '教育', 'IT/互联网', '金融', '学生', '其他'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12'
        }
      },
      series: [
        {
          name: '年龄分布',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 5, name: '电子商务' },
            { value: 1, name: '教育' },
            { value: 6, name: 'IT/互联网' },
            { value: 2, name: '金融' },
            { value: 1, name: '学生' },
            { value: 1, name: '其他' }
          ]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_33() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('fb3'))
    const option = {
      title: [{
        text: '兴趣分布',
        left: 'center',
        textStyle: {
          color: '#fff',
          fontSize: '16'
        }

      }],
      tooltip: {
        trigger: 'item',
        formatter: '{a} <br/>{b}: {c} ({d}%)',
        position: function (p) { // 其中p为当前鼠标的位置
          return [p[0] + 10, p[1] - 10]
        }
      },
      legend: {
        top: '70%',
        itemWidth: 10,
        itemHeight: 10,
        data: ['汽车', '旅游', '财经', '教育', '软件', '其他'],
        textStyle: {
          color: 'rgba(255,255,255,.5)',
          fontSize: '12'
        }
      },
      series: [
        {
          name: '兴趣分布',
          type: 'pie',
          center: ['50%', '42%'],
          radius: ['40%', '60%'],
          color: ['#065aab', '#066eab', '#0682ab', '#0696ab', '#06a0ab', '#06b4ab', '#06c8ab', '#06dcab', '#06f0ab'],
          label: { show: false },
          labelLine: { show: false },
          data: [
            { value: 2, name: '汽车' },
            { value: 3, name: '旅游' },
            { value: 1, name: '财经' },
            { value: 4, name: '教育' },
            { value: 8, name: '软件' },
            { value: 1, name: '其他' }
          ]
        }
      ]
    }

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }
  function echarts_7() {
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart7'))

    // var dataStyle = {
    //   normal: {
    //     label: {
    //       show: false
    //     },
    //     labelLine: {
    //       show: false
    //     }
    //     // shadowBlur: 40,
    //     // shadowColor: 'rgba(40, 40, 40, 1)',
    //   }
    // }
    // var placeHolderStyle = {
    //   normal: {
    //     color: 'rgba(255,255,255,.05)',
    //     label: { show: false },
    //     labelLine: { show: false }
    //   },
    //   emphasis: {
    //     color: 'rgba(0,0,0,0)'
    //   }
    // }
    const option = {
      series: [
        {
          type: 'gauge',
          startAngle: 180,
          endAngle: 0,
          center: ['50%', '75%'],
          radius: '90%',
          min: 0,
          max: 1,
          splitNumber: 8,
          axisLine: {
            lineStyle: {
              width: 6,
              color: [
                [0.8, '#7CFFB2'],
                // [0.5, '#FDDD60'],
                // [0.75, '#58D9F9'],
                [1, '#FF6E76']
              ]
            }
          },
          pointer: {
            icon: 'path://M12.8,0.7l12,40.1H0.7L12.8,0.7z',
            length: '12%',
            width: 20,
            offsetCenter: [0, '-60%'],
            itemStyle: {
              color: 'inherit'
            }
          },
          axisTick: {
            length: 12,
            lineStyle: {
              color: 'inherit',
              width: 2
            }
          },
          splitLine: {
            length: 20,
            lineStyle: {
              color: '#ddd',
              width: 5
            }
          },
          axisLabel: {
            color: '#ddd',
            fontSize: 20,
            distance: -60,
            rotate: 'tangential',
            formatter: function (value) {
              if (value === 0.875) {
                return '内存空间不足';
              }
              else if (value === 0.375) {
                return '内存充足';
              }
              return '';
            }
          },
          title: {
            offsetCenter: [0, '-10%'],
            fontSize: 20
          },
          detail: {
            fontSize: 30,
            offsetCenter: [0, '-35%'],
            valueAnimation: true,
            formatter: function (value) {
              return Math.round(value * 100) + '';
            },
            color: 'inherit'
          },
          data: [
            {
              value: 0.75,
              name: '内存使用率'
            }
          ]
        }
      ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option)
    window.addEventListener('resize', function () {
      myChart.resize()
    })
  }

}

